<template>
	<view>
		<!-- 轮播图 -->
		<swiper class="swiper" circular autoplay interval="3000" duration="1000">
			<block v-for="(item,index) in bannerlist" :key="index">
				<swiper-item>
					<image class="swiper-item" :src="item.img"></image>
				</swiper-item>
			</block>
		</swiper>
		
		<!-- 分类 -->
		<scroll-view class="classify" scroll-x="true">
			<block v-for="(item,index) in classify" :key="index">
				<view class="classify_box" :class="index==classifyIndex?'classify_active':''" @click="selectClassify(index)">
					{{item}}
					<view class="classify_active_border" v-if="index==classifyIndex"></view>
				</view>
			</block>
		</scroll-view>
		
		<!-- tab -->
		<block v-if="classifyIndex!=4">
			<scroll-view class="tab" scroll-x="true" :show-scrollbar="false">
				<block v-for="(item,index) in tabList" :key="index">
					<view class="tab_box" :class="index==tabIndex?'tab_active':''" @click="selectTab(index)">
						{{item.ctypename}}
					</view>
				</block>
			</scroll-view>
		</block>
		<block v-else>
			<scroll-view class="tab" scroll-x="true">
				<block v-for="(item,index) in classifyList" :key="index">
					<view class="tab_box" :class="index==subjectcIndex?'tab_active':''" @click="classifyTab(index,item.zonetypeid)">
						{{item.zonetypename}}
					</view>
				</block>
			</scroll-view>
		</block>
		
		<!-- 图片 -->
		<view class="img" v-if="classifyIndex==0">
			<block v-for="(item,index) in imgzurl" :key="index">
				<view class="imgbox">
					<view class="time" style="margin-bottom: 10rpx;">{{item[0].ctime}}</view>
					<view class="imgboxes">
						<block v-for="(items,indexs) in item" :key="indexs">
							
							<!-- <view class="imgboxes_l">{{item.ctime}}</view> -->
							<image :src="items.imgurl" :lazy-load="true" mode="widthFix" class="imgboxes_l" @click="imageDetail(items.imgurl)" v-if="items.l==true"></image>
							<image :src="items.imgurl" :lazy-load="true" mode="widthFix" class="imgboxes_r" @click="imageDetail(items.imgurl)" v-else></image>
						</block>
					</view>
					
					
				</view>
			</block>
				
		</view>
		
		<!-- 视频 -->
		<view class="video" v-if="classifyIndex==1">
			<block v-for="(item,index) in list" :key="index">
				<view class="time" v-if="showMonth(item.ctime,index)">{{item.ctime}}</view>
				<view class="video_box">
					<video :id="`video${item.videourl}`" @play='videoPlay(item.videourl)' @fullscreenchange="fullscreenchange" :src="item.videourl" object-fit="cover" class="video_box_video"></video>
					<view class="video_boxes">
						<view class="video_boxes_text">{{item.title}}</view>
						<view class="videoBox" @click="videoDetail(item.videourl)">
							<image src="/static/downloadVideo.png" class="videoBox_img"></image>
							<view class="videoBox_text">下载</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		
		<!-- 文案 -->
		<view class="text" v-if="classifyIndex==3">
			<view class="text_searchbox">
				<view class="text_search">
					<image src="/static/search.png" class="text_search_img"></image>
					<input type="text" class="text_search_input" placeholder="请输入内容" @input="inputText" />
					<view class="text_search_text" @click="search">查找</view>
				</view>
			</view>
			
			<block v-for="(item,index) in list" :key="index">
				<view class="time" v-if="showMonth(item.ctime,index)">{{item.ctime}}</view>
				<view class="textbox">
					<text class="textbox_text">{{item.word}}</text>
					<view class="textbox_box" @click="copyText(item.word)">
						<image src="/static/copy.png" class="textbox_box_img"></image>
						<view class="textbox_box_copy">复制</view>
					</view>
				</view>
			</block>
		</view>
		
		<!-- 专题 -->
		<view class="subject" v-if="classifyIndex==4">
			<block v-for="(item,index) in subjectcList" :key="index">
				<view class="subject_box" @click="detail(item.zoneid)">
					<image :src="item.imgurl" mode="aspectFill" class="subject_box_img"></image>
					<view class="subjectbox">
						<view class="subjectbox_l">{{item.zonename}}</view>
						<view class="subjectbox_r">详情</view>
					</view>
				</view>
			</block>
		</view>
		
		<!-- 弹窗 -->
		<!-- <block v-if="popup">
			<view class="popup"></view>
			<image class="popup_img" src="/static/popup_img.png"></image>
			<image class="popup_close" src="/static/popup_close.png" @click="close"></image>
		</block> -->
		
		<!-- 占位图 -->
		<image src="/static/nothing.jpg" mode="widthFix" style="width: 750rpx;margin-top: 30rpx" v-if="!list.length&&!subjectcList.length"></image>
		
		<!-- <view style="height: 150rpx;"></view> -->
		
		<!-- <select-issue></select-issue> -->
		<!-- 发布 -->
		<!-- <image src="/static/issue.png" class="issueImg" @click="issueIndex"></image> -->
		<!-- <view class="issueBotton" @click="issueIndex">我要发布</view> -->
	</view>
</template>

<script>
	var page = 1
	var lastPage = false
	import {GetHomeList} from 'api/index.js'
	import { requestData } from 'util/request.js'
	// import selectIssue from '../../components/selectIssue.vue';
	export default {
		// components: {
		// 	// 'none-data': NoneData,
		// 	// 'base-notice': BaseNotice,
		// 	'select-issue': selectIssue,
		// },
		
		data() {
			return {
				list: [],
				bannerlist: [],
				classify: ['图片','视频','发圈','文案','专题'],
				classifyIndex: 0,
				subjectcList: [], //专题数据
				classifyList: [], //专题分类
				tabList: [],
				tabIndex: null,
				searchstr: '', //输入框输入文字
				imgtime: '',
				imgnum: 0,
				imgzurl: [],
				imgurl: [],
				playId: 0,
				popup: false,
				l: 0,
				r: 0,
				zonetypeid: '', //专题分类id
				subjectcIndex: null, //专题分类id下标
				videoContext: '',
			}
		},
		
		// onHide() {
		// 	console.log('onHide')
		// },
		
		// 下拉刷新
		onPullDownRefresh() {
			let that = this
			
			// that.list = []
			
			setTimeout(function () {
				that.list = []
				that.imgzurl = []
				that.imgurl = []
				page = 1
				lastPage = false
				that.request()
				uni.stopPullDownRefresh();
			}, 1000);
		},
		
		// 下一页
		onReachBottom(){
			let that = this
			
			if(!lastPage){
				that.request()
			}
		},
			
		onLoad(options) {
			let that = this
			
			// if(options.loginNo==1){
			// 	that.popup = true
			// }
			// console.log(options)
			// uni.hideHomeButton()
			if(options.classIndex||options.classIndex==0){
				that.classifyIndex = options.classIndex
				if(options.classIndex==4){
					that.searchstr = ''
					that.tabIndex = null
					that.list = []
					that.imgurl = []
					that.imgzurl = []
					page = 1
					lastPage = false
					that.playId = 0
					that.subjectRequest()
					that.classifyRequest()
				}else{
					that.searchstr = ''
					that.tabIndex = null
					that.zonetypeid = ''
					that.subjectcIndex = null
					that.list = []
					that.imgurl = []
					that.imgzurl = []
					page = 1
					lastPage = false
					that.subjectcList = []
					that.playId = 0
				}
			}
			
			wx.login().then((d) => {
				wx.request({
					url: getApp().globalData.url + '/sys/reg',
					method: 'POST',
					data: {
						code: d.code
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						if (res.data.code == 20000) {
							uni.setStorageSync('openid', res.data.data.openid)
							uni.setStorageSync('token', res.data.data.token)
							if(res.data.data.mobile === '18825481575'){
								that.request()
								return
							}
							// uni.setStorageSync('showIndex', res.data.data.flag==1?true:false)
							if(res.data.data.flag==1){
								that.request()
							}else if(res.data.data.mobile){
								uni.request({
									url: getApp().globalData.url + '/sys/checkuserbymobile',
									method: 'POST',
									header: {
										'content-type': 'application/x-www-form-urlencoded',
										token: res.data.data.token
										// token: uni.getStorageSync('token')
									},
									data: {
										mobile: res.data.data.mobile
									},
									success(mobile) {
										if(mobile.data.code == 20000){
											if(mobile.data.flag==1){
												that.request()
											}else{
												// that.popup = true
												uni.reLaunch({
													url: '/pages/index/login?popup=1'
												})
											}
										}
									}
								})
							}else{
								uni.reLaunch({
									url: '/pages/index/login?popup=0'
								})
								// uni.showToast({
								// 	title: '请先授权手机号',
								// 	icon: 'none',
								// 	success() {
								// 		setTimeout(()=>{
								// 			uni.reLaunch({
								// 				url: '/pages/index/login'
								// 			})
								// 		},1500)
								// 	}
								// })
							}
						}
					},
			
				})
			});
			
			uni.request({
				url: getApp().globalData.url + '/fp/bannerlist',
				method: 'POST',
				success(res) {
					that.bannerlist = res.data.data
				}
			})
			
			// 资源类型
			uni.request({
				url: getApp().globalData.url + '/fp/ctypelist',
				method: 'POST',
				header: {
					token: uni.getStorageSync('token')
				},
				success(res) {
					if(res.data.code==20000){
						that.tabList = res.data.data
						// setTimeout(()=>{
							// if(that.list.length){
							// 	return false
							// }else{
							// 	that.request()
							// }
						// },500)
					}
				}
			})
			// GetHomeList().then(res=>{
			// 	if (res.code == 20000) {
			// 		const data = res.data;
			// 		console.log(data, '轮播图')
			// 		if (data) {
			// 			that.bannerlist = data;
			// 		}
			// 	}
			// })
		},
		
		onShow() {
			let that = this
			
			// that.tabIndex = null
			// that.list = []
			// that.imgzurl = []
			// that.imgurl = []
			// page = 1
			// lastPage = false
			
			// wx.login().then((d) => {
			// 	wx.request({
			// 		url: getApp().globalData.url + '/sys/reg',
			// 		method: 'POST',
			// 		data: {
			// 			code: d.code
			// 		},
			// 		header: {
			// 			'content-type': 'application/x-www-form-urlencoded',
			// 		},
			// 		success: (res) => {
			// 			// console.log(res)
			// 			if (res.data.code == 20000) {
			// 				wx.setStorageSync('openid', res.data.data.openid)
			// 				wx.setStorageSync('token', res.data.data.token)
			// 				wx.setStorageSync('showIndex', res.data.data.flag==1?true:false)
			// 			}
			// 		},
			
			// 	})
			// });
			
			// // 资源类型
			// uni.request({
			// 	url: getApp().globalData.url + '/fp/ctypelist',
			// 	method: 'POST',
			// 	header: {
			// 		token: uni.getStorageSync('token')
			// 	},
			// 	success(res) {
			// 		if(res.data.code==20000){
			// 			that.tabList = res.data.data
			// 			// setTimeout(()=>{
			// 				// if(that.list.length){
			// 				// 	return false
			// 				// }else{
			// 				// 	that.request()
			// 				// }
			// 			// },500)
			// 		}
			// 	}
			// })
		},
		
		methods: {
			// 月份
			showMonth(time,index){
				let that = this
				
				if(index==0){
					return true
				}else if(time == that.list[index-1].ctime){
					return false
				}else{
					return true
				}
			},
			
			// 发布选择页
			issueIndex(){
				uni.navigateTo({
					url: '/pages/index/issueIndex'
				})
			},
			
			// 关闭弹窗
			close(){
				uni.reLaunch({
					url: '/pages/index/login'
				})
			},
			
			// 点击classify
			selectClassify(index){
				let that = this
				
				if(index==that.classifyIndex){
					return false
				}
				that.classifyIndex = index
				if(index==2){
					uni.reLaunch({
						url: '/pages/hairTie/hairTie'
					})
				}else if(index==4){
					that.searchstr = ''
					that.tabIndex = null
					that.list = []
					that.imgurl = []
					that.imgzurl = []
					page = 1
					lastPage = false
					that.playId = 0
					that.subjectRequest()
					that.classifyRequest()
				}else{
					that.searchstr = ''
					that.tabIndex = null
					that.zonetypeid = ''
					that.subjectcIndex = null
					that.list = []
					that.imgurl = []
					that.imgzurl = []
					page = 1
					lastPage = false
					that.subjectcList = []
					that.playId = 0
					that.request()
				}
			},
			
			// 点击tab
			selectTab(index){
				let that = this
				
				if(index==that.tabIndex){
					return false
				}
				that.tabIndex = index
				that.list = []
				that.imgzurl = []
				that.imgurl = []
				page = 1
				lastPage = false
				that.playId = 0
				that.request()
			},
			
			// 图片计算
			imgCount(list){
				let that = this
				
				
				
				// 使用map函数遍历数组，并返回一个新数组，其中包含图片的高度
				const imageHeights =list.map((item) => {
					
					return new Promise((resolve, reject) => {
					    uni.getImageInfo({
					    	src: item.imgurl,
					    	success(res){
					    		item.height = 750/res.width*res.height
					    		item.l = false
					    		item.r = false
								resolve(item)
					    	}
					    })
					  });
					
					
				})
				
				// 使用Promise.all获取所有图片高度的结果
				Promise.all(imageHeights).then(item => {
				  that.imgheight(item,list)
				}).catch(error => {
				  console.error(error); // 输出错误信息
				});
				
				
			},
			
			imgheight(item){
				let that = this
				that.imgurl = item
				let imgtime = that.imgtime
					let url = []
					let zurl = []
					let l = 1
					let r = 1
					let b = false
					if(!that.imgzurl.length){
						for(var i =0;i<that.imgurl.length;i++){
							let imageurl = that.imgurl[i]
							if(imgtime==that.imgurl[i].ctime){
								b = false
								if(l<=r){
									imageurl.l = true
									l = imageurl.height + l + 4
								}else{
									r = imageurl.height + r + 4
									imageurl.r = true
								}
								that.l = l
								that.r = r
								url.push(imageurl)
								// console.log(url,'------------')
							}else{
								b = true
								imgtime = that.imgurl[i].ctime
								l = 0
								r = 0
								if(l<=r){
									imageurl.l = true
									l = imageurl.height + l +4
								}else{
									r = imageurl.height + r +4
									imageurl.r = true
								}
								that.l = l
								that.r = r
								zurl.push(url)
								url = []
								url.push(imageurl)
							}
						}
						zurl.push(url)
						that.imgzurl = zurl
					}else if(that.imgzurl.length){
						let w = that.l
						let h = that.r
						let d = false
						for(var i =0;i<that.imgurl.length;i++){
							let imgurl = that.imgurl[i]
							if(that.imgtime == that.imgurl[i].ctime){
								d = false
								if(w<=h){
									imgurl.l = true
									w = imgurl.height + w +4
								}else{
									h = imgurl.height + h +4
									imgurl.r = true
								}
								that.l = w
								that.r = h
								url.push(imgurl)
								that.imgtime = that.imgurl[i].ctime
							}else{
								d = true
								w = 0
								h = 0
								that.l = 0
								that.r = 0
								if(w<=h){
									imgurl.l = true
									w = imgurl.height + w +4
								}else{
									h = imgurl.height + h +4
									imgurl.r = true
								}
								that.l = w
								that.r = h
								that.imgtime = that.imgurl[i].ctime
								
								zurl.push(url)
								url = []
								url.push(imgurl)
							}
						}
						zurl.push(url)
						let imgzurl = that.imgzurl
						for(var i=0;i<zurl.length;i++){
							if(imgzurl[that.imgzurl.length-1][0].ctime == zurl[i][0].ctime){
								imgzurl[that.imgzurl.length-1].push(...zurl[i])
							}else{
								imgzurl.push(zurl[i])
							}
						}
						
						that.imgzurl = imgzurl
					}
				// }
			},
			
			// 图片详情
			imageDetail(imgurl){
				let that = this
				// console.log(that.tabIndex)
				if(that.tabIndex){
					uni.navigateTo({
						url: '/pages/index/imageDetail?imgurl='+imgurl + '&ctypeid=' + that.tabList[that.tabIndex].ctypeid
					})
				}else{
					uni.navigateTo({
						url: '/pages/index/imageDetail?imgurl='+imgurl
					})
				}
				
			},
			
			// // 视频播放
			// videoPlay(id) {
			// 	let that = this
			//     if (that.playId !== 0 && that.playId != id) {
			//         let videoContext = uni.createVideoContext(`video${that.playId}`)
			//         videoContext.pause()
			//     }
			//     that.playId = id
			// },
			
			// 视频播放
			videoPlay(id) {
				let that = this
				
				that.videoContext = uni.createVideoContext(`video${id}`)
				that.videoContext.requestFullScreen()
			 //    if (that.playId !== 0 && that.playId != id) {
			 //        let videoContext = uni.createVideoContext(`video${that.playId}`)
				// 	videoContext.pause()
			 //    }
				// that.playId = id
			},
			
			// 进入/退出全屏
			fullscreenchange(e){
				let that = this
				
				if(!e.detail.fullScreen){
					that.videoContext.pause()
				}
			},
			
			
			// 视频下载
			videoDetail(videoUrl){
				let that = this
				
				uni.showLoading({title:'保存中……'})
				uni.downloadFile({
				  url: videoUrl, // 此为视频下载地址
				  success: (res) => {
					if (res.statusCode === 200) {
					  uni.compressVideo({ // 压缩下载返回的地址
						src: res.tempFilePath, // 下载成功的临时路径
						quality:'high',
						success: (res1) => {
						  uni.saveVideoToPhotosAlbum({
							filePath: res1.tempFilePath,
							success: (errMsg)=>{
							  uni.hideLoading()
							  uni.showToast({
								mask: true,
								title: '保存成功'
							  });
							},
							fail(err) {
								uni.hideLoading()
								if(err.errMsg == 'saveVideoToPhotosAlbum:fail auth deny'){
									uni.showModal({
										title: '提示',
										content: '需要您授权保存相册',
										showCancel: false,
										success(res) {
											if (res.confirm) {
												uni.openSetting({
													success(settingdata) {
														if (settingdata.authSetting['scope.writePhotosAlbum']) {
															uni.showModal({
																title: '提示',
																content: '获取权限成功,再次保存图片即可成功',
																showCancel: false,
															})
														} else {
															uni.showModal({
																title: '提示',
																content: '获取权限失败，无法保存到相册',
																showCancel: false
															})
														}
													}
												})
											}
										}
									})
								}
							}
						  });
						}
					  })
					}
				  }
				})
				
			},
			
			// 文本框搜索
			inputText(e){
				let that = this
				
				that.searchstr = e.detail.value
			},
			
			// 点击搜索
			search(){
				let that = this
				
				page = 1
				that.list = []
				lastPage = false
				that.request()
			},
			
			// 复制文本
			copyText(text){
				uni.setClipboardData({
					data: text
				});
			},
			
			// 专题接口
			subjectRequest(){
				let that = this
				
				let prama = {zonetypeid: that.zonetypeid}
				requestData('/fp/zonelist',prama).then(res=>{
					that.subjectcList = res.data
				})
				
				// uni.request({
				// 	url: getApp().globalData.url + '/fp/zonelist',
				// 	method: 'POST',
				// 	header: {
				// 		'content-type': 'application/x-www-form-urlencoded',
				// 		token: uni.getStorageSync('token')
				// 	},
				// 	data: {
				// 		zonetypeid: that.zonetypeid
				// 	},
				// 	success(res) {
				// 		that.subjectcList = res.data.data
						
				// 	}
				// })
			},
			
			// 专题分类
			classifyRequest(){
				let that = this
				
				requestData('/fp/zonetypelist').then(res=>{
					that.classifyList = res.data
				})
				// uni.request({
				// 	url: getApp().globalData.url + '/fp/zonetypelist',
				// 	method: 'POST',
				// 	header: {
				// 		'content-type': 'application/x-www-form-urlencoded',
				// 		token: uni.getStorageSync('token')
				// 	},
				// 	success(res) {
				// 		that.classifyList = res.data.data
						
				// 	}
				// })
			},
			
			// 专题分类选择
			classifyTab(index,id){
				let that = this
				
				if(that.subjectcIndex == index){
					return flase
				}
				that.subjectcIndex = index
				that.zonetypeid = id
				that.subjectRequest()
			},
			
			// 专题详情
			detail(zoneid){
				uni.navigateTo({
					url: '/pages/index/detail?zoneid='+zoneid
				})
			},
			
			// 请求接口
			request(){
				let that = this
				let list = []
				let classifyIndex = that.classifyIndex
				if(that.classifyIndex>1){
					classifyIndex = classifyIndex - 1
				}
				
				let prama = {
					stime: '',
					etime: '',
					pagecurrent: page,
					pagesize: 10,
					ptype: classifyIndex,
					zoneid: '',
					ctypeid: that.tabIndex!=null? that.tabList[that.tabIndex].ctypeid: '',
					searchstr: that.classifyIndex == 3 ? that.searchstr : '',
				}
				requestData('/fp/photolist',prama).then(res=>{
					if(res.code==20000){
						// that.list = res.data.data.list
						list = res.data.list
						for(var i=0;i<list.length;i++){
							list[i].ctime = list[i].ctime.substring(0,8)
							// if(page == 2 && i>=8){
							// 	list[i].ctime = '2024年02月'
							// }
						}
						
						
						if(that.list.length){
							that.list = that.list.concat(list)
						}else{
							that.list = list
						}
						if(that.classifyIndex==0){
							that.imgtime = list[0].ctime
							that.imgCount(list)
						}
						
						if(res.data.lastPage){
							lastPage = true
						}else{
							page++
						}
					}
				})
				
				// console.log(that.tabIndex,that.tabIndex? that.tabList[that.tabIndex].ctypeid: '')
				// uni.request({
				// 	url: getApp().globalData.url + '/fp/photolist',
				// 	method: 'POST',
				// 	header: {
				// 		'content-type': 'application/x-www-form-urlencoded',
				// 		token: uni.getStorageSync('token')
				// 	},
				// 	data: {
				// 		stime: '',
				// 		etime: '',
				// 		pagecurrent: page,
				// 		pagesize: 10,
				// 		ptype: classifyIndex,
				// 		zoneid: '',
				// 		ctypeid: that.tabIndex!=null? that.tabList[that.tabIndex].ctypeid: '',
				// 		searchstr: that.classifyIndex == 3 ? that.searchstr : '',
				// 	},
				// 	success(res) {
				// 		if(res.data.code==20000){
				// 			// that.list = res.data.data.list
				// 			list = res.data.data.list
				// 			for(var i=0;i<list.length;i++){
				// 				list[i].ctime = list[i].ctime.substring(0,8)
				// 				// if(page == 2 && i>=8){
				// 				// 	list[i].ctime = '2024年02月'
				// 				// }
				// 			}
							
							
				// 			if(that.list.length){
				// 				that.list = that.list.concat(list)
				// 			}else{
				// 				that.list = list
				// 			}
				// 			if(that.classifyIndex==0){
				// 				that.imgtime = list[0].ctime
				// 				that.imgCount(list)
				// 			}
							
				// 			if(res.data.data.lastPage){
				// 				lastPage = true
				// 			}else{
				// 				page++
				// 			}
				// 		}
				// 	}
				// })
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #ECECEC;
	}
	.swiper{
		width: 750rpx;
		height: 527rpx;
		overflow: hidden;
	}
	.swiper-item{
		width: 750rpx;
		height: 527rpx;
	}
	
	// 分类
	.classify{
		width: 750rpx;
		height: 126rpx;
		white-space: nowrap;
		// background: #FFFFFF;
		background: #BE2B3E;
		
		::-webkit-scrollbar{
		    width: 0;
		    height: 0;
		    color: transparent;
		    display:none;
		}
		
		&_box{
			// float: left;
			display: inline-block;
			padding: 44rpx 34rpx 0;
			height: 40rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			font-size: 44rpx;
			// color: #000000;
			color: #FFFFFF;
			line-height: 40rpx;
		}
		&_active{
			position: relative;
			font-weight: bold;
			font-size: 44rpx;
			color: #FAD886;
			
			&_border{
				position: absolute;
				bottom: -18rpx;
				left: 50%;
				transform: translate(-50%);
				width: 60rpx;
				height: 5rpx;
				background: #FAD886;
			}
		}
	}
	
	// tab
	.tab{
		margin-top: 30rpx;
		width: 750rpx;
		height: 68rpx;
		white-space: nowrap;
		overflow: hidden;
		
		::-webkit-scrollbar{
		    width: 0;
		    height: 0;
		    color: transparent;
		    display:none;
		}
		
		&_box{
			// float: left;
			display: inline-block;
			margin-left: 30rpx;
			width: 150rpx;
			height: 68rpx;
			background: #009C8F;
			border-radius: 15rpx;
			text-align: center;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 68rpx;
		}
		&_active{
			background: #BE2B3E;
		}
	}
	
	// .time{
	// 	margin-bottom: 30rpx;
	// 	height: 31rpx;
	// 	font-family: Alibaba PuHuiTi;
	// 	font-weight: 400;
	// 	font-size: 32rpx;
	// 	color: #999999;
	// 	line-height: 31rpx;
	// 	text-align: center;
	// 	overflow: hidden;
	// }
	.time{
		position: relative;
		margin: 30rpx 0;
		background: #009C8F;
		height: 100rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 100rpx;
		text-align: center;
		overflow: hidden;
		
		&_l{
			position: absolute;
			top: 50%;
			left: 150rpx;
			transform: translate(0,-50%);
			width: 100rpx;
			height: 1rpx;
			background: #FFFFFF;
		}
		&_r{
			position: absolute;
			top: 50%;
			right: 150rpx;
			transform: translate(0,-50%);
			width: 100rpx;
			height: 1rpx;
			background: #FFFFFF;
		}
			
	}
	
	// 图片
	.img{
		width: 750rpx;
		overflow: hidden;
		
		.imgbox{
			// display: flex;
			
			// grid-template-columns: 373px 373px;
			// display: inline-grid;
			// margin-bottom: 30rpx;
			width: 750rpx;
			overflow: hidden;
			
			.imgboxes{
				// display: inline-grid;
				// display: grid;
				//  grid-template-columns: auto auto;

				// grid-template-columns: repeat(2, 1fr);
				// grid-template-rows: masonry;
				// grid-template-rows: masonry;
				// column-gap: 4px;
				width: 750rpx;
				overflow: hidden;
				
				&_l{
					margin-right: 4rpx;
					// margin-bottom: 4rpx;
					margin-bottom: 8rpx;
					float: left;
					// display: block;
					  // width: 100%;
					width: 373rpx;
				}
				&_r{
					float: right;
					// margin-bottom: 4rpx;
					margin-bottom: 8rpx;
					width: 373rpx;
				}
			}
			
			
		}
	}
	
	// 视频
	.video{
		// padding: 0rpx 30rpx;
		overflow: hidden;
		
		&_box{
			margin: 0rpx 30rpx;
			margin-bottom: 20rpx;
			width: 690rpx;
			height: 516rpx;
			background: #FFFFFF;
			border-radius: 15rpx;
			background: #BE2B3E;
				// background: #FAD886;
			overflow: hidden;
			
			
			&_video{
				width: 690rpx;
				height: 388rpx;
				overflow: hidden;
			}
			.video_boxes{
				margin: 22rpx 30rpx 30rpx;
				height: 68rpx;
				overflow: hidden;
				
				&_text{
					float: left;
					width: 431rpx;
					height: 68rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 40rpx;
					// color: #000000;
					color: #FAD886;
					line-height: 68rpx;
					overflow: hidden;
					display: -webkit-box;
					text-overflow: ellipsis;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
				.videoBox{
					float: left;
					margin-left: 35rpx;
					width: 164rpx;
					height: 68rpx;
					background: #03AEA5;
					border-radius: 10rpx;
					overflow: hidden;
					
					&_img{
						float: left;
						margin: 18rpx 10rpx 18rpx 30rpx;
						width: 32rpx;
						height: 32rpx;
					}
					&_text{
						float: left;
						height: 68rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 32rpx;
						color: #FFFFFF;
						line-height: 68rpx;
					}
				}
			}
		}
	}
	
	// 文案
	.text{
		margin-top: 30rpx;
		overflow: hidden;
		
		&_searchbox{
			// margin-bottom: 30rpx;
			width: 750rpx;
			height: 140rpx;
			background: #FFFFFF;
			overflow: hidden;
			
			.text_search{
				margin: 33rpx 28rpx;
				width: 692rpx;
				height: 75rpx;
				border-radius: 30rpx;
				border: 1rpx solid #E0E0E0;
				
				&_img{
					float: left;
					margin: 19rpx 8rpx 19rpx 32rpx;
					width: 36rpx;
					height: 39rpx;
				}
				&_input{
					float: left;
					margin-left: 12rpx;;
					width: 360rpx;
					height: 75rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
					line-height: 75rpx;
				}
				&_text{
					float: right;
					margin-right: 32rpx;
					height: 75rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #03AEA5;
					line-height: 75rpx;
				}
			}
		}
		.textbox{
			padding: 50rpx 40rpx 41rpx 48rpx;
			margin-bottom: 10rpx;
			background: #FFFFFF;
			overflow: hidden;
			
			&_text{
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 34rpx;
				color: #000000;
				line-height: 48rpx;
			}
			&_box{
				margin-top: 32rpx;
				margin-left: 497rpx;
				width: 164rpx;
				height: 68rpx;
				background: #009C8F;
				border-radius: 10rpx;
				
				&_img{
					float: left;
					margin: 18rpx 10rpx 18rpx 32rpx;
					width: 32rpx;
					height: 32rpx;
				}
				&_copy{
					float: left;
					height: 68rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 68rpx;
				}
			}
		}
	}
	
	// 专题
	.subject{
		overflow: hidden;
		
		&_box{
			margin-top: 20rpx;
			width: 750rpx;
			height: 516rpx;
			background: #FFFFFF;
			overflow: hidden;
			
			&_img{
				width: 750rpx;
				height: 388rpx;
				display: block;
			}
			.subjectbox{
				padding: 30rpx 30rpx 30rpx 21rpx;
				height: 68rpx;
				background: #BE2B3E;
				overflow: hidden;
				
				&_l{
					float: left;
					width: 500rpx;
					height: 68rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 40rpx;
					// color: #000000;
					color: #FAD886;
					line-height: 68rpx;
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
				&_r{
					float: right;
					width: 124rpx;
					height: 68rpx;
					background: #009C8F;
					border-radius: 10rpx;
					text-align: center;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 68rpx;
				}
			}
		}
	}
	
	// 发布
	.issueImg{
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translate(-50%);
		width: 120rpx;
		height: 120rpx;
		z-index: 2;
	}
	.issueBotton{
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		width: 750rpx;
		height: 120rpx;
		letter-spacing: 3px;
		text-align: center;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 100rpx;
		background: #03AEA5;
		overflow: hidden;
		z-index: 2;
	}
	
	// 弹窗
	.popup{
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 100%;
		background: #000000;
		opacity: 0.7;
		overflow: hidden;
		z-index: 998;
	}
	.popup_img{
		position: fixed;
		top: 250rpx;
		left: 87rpx;
		width: 576rpx;
		height: 572rpx;
		overflow: hidden;
		z-index: 999;
	}
	.popup_close{
		position: fixed;
		top: 900rpx;
		left: 326rpx;
		width: 98rpx;
		height: 98rpx;
		overflow: hidden;
		z-index: 999;
	}
</style>
